<!DOCTYPE html>
<html lang="en">
	<head>
		<title>nTube: Trending</title>
		<meta name="application-name" content="nTube" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="iwebkit-use-fruit-styled-layout" value="true;version=1" />
		<meta name="description" content="nTube: Trending." />
		<meta charset="UTF-8" />
		<meta name="theme-color" content="#282828" />
		<meta name="robots" content="noindex, nofollow" />
		<link rel="apple-touch-icon" href="/resources/logos/ntube-logo-192.png" />
		<link rel="manifest" href="/manifest.json" />
		<link rel="preload" href="resources/promise-queues.js" as="script" />
		<link rel="preload" href="resources/libWeb.js" as="script" />
		<link rel="preload" href="resources/settings.js" as="script" />
		<link rel="preload" href="resources/base.js" as="script" />
		<script src="resources/promise-queues.js"></script>
		<script src="resources/libWeb.js"></script>
		<script src="resources/settings.js"></script>
		<script src="resources/base.js"></script>
		<link rel="stylesheet" type="text/css" href="resources/base.css" />
		<script src="resources/search.js"></script>
		<link rel="stylesheet" type="text/css" href="resources/search.css" />
		<style id="poly-item-css">
			.poly-item {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(255, 255, 255, 0.11), 0 10px 10px rgba(255, 255, 255, 0.08);
				border: 1px solid white;
				margin-bottom: 10px;
			}
		</style>
		<style id="body-css">
			body {
				background-color: black;
				color: white;
			}
		</style>
		<style>
			.menu {
				position: fixed;
				top: 0;
				margin: auto;
				left: 0;
				right: 0;
				width: 100%;
				height: 32px;
				border-bottom: 1px solid green;
				margin-right: 0px;
				z-index: 15;
				display: flex;
			}

			.menu-item {
				flex: 1;
				max-width: 50%;
				overflow: hidden;
				white-space: nowrap;
			}

			.poly-item-light {
				padding-left: 5px;
				box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
				border: 1px solid black;
				margin-bottom: 10px;
			}
		</style>
		<style id="_css_fonts">
			html {
				font-family: -apple-system, BlinkMacSystemFont, "Product Sans", "Google Sans", "Segoe UI", "Arial", sans-serif;
			}
		</style>
	</head>

	<body>
		<div class="menu">
			<div class="menu-item">
				<p style="padding-left: 5px; margin-top: 5px; vertical-align: middle; font-weight: bold; display: inline-block; margin-right: 15px; width: auto">
					<span style="color: red">n</span><span id="ntube_main_menu_tube_label" style="color: lightgreen">Tube</span>
					<sub id="ntube_version_main_menu_label" style="font-size: 0.9em; line-height: 25%">1.5.0</sub>
					<img id="ntube-winter-logo" src="resources/events/christmas.png" title="Merry Christmas!" decoding="async" />
				</p>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px">
					<a href="/" title="Home Page">
						<img src="resources/icons/home.svg" alt="home" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px">
					<a href="/trending" title="Trending Videos">
						<img src="resources/icons/trending.svg" alt="trending" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
				<div style="display: inline-block; vertical-align: middle; margin-right: 5px; margin-bottom: 3px">
					<a href="/settings" title="Settings">
						<img src="resources/icons/settings.svg" alt="settings" style="height: 2em; width: 2em" decoding="async" />
					</a>
				</div>
			</div>
			<div class="menu-item">
				<div style="height: 100%; display: flex">
					<style>
						#search_overlay {
							z-index: 8;
							position: fixed;
							background-color: rgba(0, 0, 0, 0.95);
							width: 100%;
							height: 100%;
							top: 0px;
							left: 0px;
						}

						.search_hidden {
							display: none;
							visibility: hidden;
						}

						#search_bar {
							background-color: inherit;
							color: inherit;
							border: none;
							border-left: 1px solid green;
							height: 100%;
							transition: border-bottom 0.5s ease-in-out;
							font-family: monospace;
							font-size: large;
							text-indent: 5px;
							flex-grow: 1;
							min-width: 50%;
						}

						#search_bar:focus {
							border-bottom: 1px solid green;
						}

						#search_button {
							border: none;
							border-left: 1px solid rgba(0, 128, 0, 0.7);
							border-right: none;
							height: 100%;
							background-color: inherit;
							color: inherit;
							margin-right: 0px;
							font-family: inherit;
						}
					</style>
					<input id="search_bar" type="text" name="Search nTube Bar." placeholder="Search nTube." />
					<button id="search_button" onclick="search_start(null);">Search</button>
				</div>
			</div>
			<script>
				run_promise(function () {
					SearchBar.init();
					id("_search_results").innerHTML = "";
				});
			</script>
		</div>
		<div id="search_overlay" class="search_hidden">
			<div style="padding-bottom: 30px"></div>
			<!--search_hidden-->
			<div style="width: 100%">
				<div style="float: left; padding-left: 5px">
					<h1 style="margin-top: 5px; margin-bottom: 5px">Search.</h1>
					<h3 style="margin-top: 5px; margin-bottom: 10px">Searching for <span id="search_query_display_string">uhhh...nothing.</span>.</h3>
				</div>
				<div style="float: right; padding-right: 15px; padding-top: 15px">
					<button style="width: 100px; height: 50px; border-radius: 30px; border: 1px solid green; background-color: inherit; color: inherit" onclick="search_close()">Close.</button>
					<script>
						function search_close() {
							id("search_overlay").classList.add("search_hidden");
						}
					</script>
				</div>
				<div style="clear: both"></div>
			</div>
			<div id="_search_results" class="poly-item" style="width: calc(100% - 30px); height: 78%; margin-right: 0px; overflow-y: auto; margin-left: 5px">
				<div class="search-item">
					<a class="search-link" href="#gotoShittyVideo">
						<img src="" alt="TOTALLY NOT CLICKBAIT" style="padding-left: 5px; display: inline; vertical-align: middle; width: 220px; height: 160px; margin-bottom: 5px" />
						<div style="padding-left: 15px; display: inline; vertical-align: middle">
							<p style="position: absolute; display: inline; vertical-align: middle; font-size: large; margin-top: 15px">CLICKBAIT TITLE</p>
							<p style="position: absolute; display: inline; vertical-align: bottom; font-size: small; margin-top: 45px">00:00 | -1 | <a href="#gotoShittyChannel">CHANNEL #2492049</a></p>
						</div>
					</a>
				</div>
			</div>
			<center>
				<button id="_search_load_more">Load more.</button>
			</center>
			<script>
				run_async(function () {
					id("_search_results").innerHTML = "";
				});
			</script>
		</div>
		<div style="padding-bottom: 30px"></div>
		<!--<div class="poly-item">
			<h3>
				<span style="color: red;">not</span><span style="color: lightgreen;">YouTube</span>.
			</h3>
			<p>
				A lightweight multiplatform client for various streaming services, now better than ever. <br>
				Now powered by nullUtil 3.0.
			</p>
		</div>-->
		<h2 style="margin-top: 5px; margin-bottom: 10px">What's trending.</h2>
		<div id="-root" class="poly-item" style="border: none">
			<style>
				.trending-video-idiv {
					display: table-cell;
					margin: auto 0px;
				}

				.trending-video {
					width: calc(50% - 5px);
					display: inline-flex !important;
					flex-basis: calc(50% - 5px);
					flex-grow: 1;
				}

				.trending-video-poly {
					padding-left: 0px !important;
					margin-right: 2px;
					padding-bottom: 2px;
					margin-bottom: 2px !important;
				}

				.trending-link-main {
					color: inherit;
					text-decoration: none;
					margin-bottom: -2px;
				}

				@media only screen and (max-width: 600px) {
					.trending-div-core {
						flex-basis: 100vw !important;
					}

					.trending-video {
						flex-basis: 100vw !important;
						width: 100% !important;
					}

					.trending-text-main {
						width: 88vw !important;
					}
				}
			</style>
			<center style="margin-bottom: 5px; margin-right: 5px">
				<div id="trending-items" style="width: 100%; padding-bottom: 0px; display: flex; flex-wrap: wrap; flex-direction: row; text-align: left">
					<!--<div class="poly-item trending-div-core">
							<a href="" style="color: inherit; text-decoration: none;">
								<img class="trending-div-img" src="https://i.ytimg.com/v/fi9dfsd/mqdefault.jpg">
								<div style="display: inline-block; padding-left: 5px; padding-right: 5px;">
									<p style="font-weight: bold; font-size: large; vertical-align: top;">$NEW_RELATED_TITLE</p>
									<p style="font-size: small; vertical-align: bottom;">$CHANNEL_NAME &centerdot; $DURATION</p>
								</div>
							</a>
						</div>-->
				</div>
			</center>
			<script>
				window.onload = function () {
					request(
						"/api/get_trending",
						null,
						function (error) {
							alert("Failed to get trending videos.\nCheck your browser console for more info.");
							console.error(error);
						},
						function (data) {
							var o = JSON.parse(data);
							if (o["items"]) {
								var items = o["items"];
								const ti = id("trending-items");
								for (var _i = 0; _i < items.length; _i++) {
									const i = _i;
									const itemData = items[i];
									var videoDiv = document.createElement("div");
									videoDiv.classList.add("trending-video");
									videoDiv.classList.add("poly-item");
									videoDiv.classList.add("trending-video-poly");
									videoDiv.style.marginBottom = "5px";
									const a = document.createElement("a");
									a.classList.add("trending-link-main");
									a.href = itemData.url;
									const image = document.createElement("img");
									image.style.verticalAlign = "middle";
									image.style.display = "table-row";
									image.style.width = "160px";
									image.style.height = "90px";
									image.loading = "lazy";
									image.decoding = "async";
									image.referrerPolicy = "no-referrer";
									if (itemData["ani_img_url"] && itemData["ani_img_url"] !== "null") {
										const im = itemData.img_url;
										const ia = itemData.ani_img_url;
										image.src = im;
										image.onmouseover = function () {
											image.src = ia;
										};
										image.onmouseout = function () {
											image.src = im;
										};
									} else {
										image.src = itemData.img_url;
									}
									a.appendChild(image);
									videoDiv.appendChild(a);
									var contentDiv = document.createElement("div");
									contentDiv.classList.add("trending-video-idiv");
									contentDiv.style.verticalAlign = "middle";
									contentDiv.style.display = "table-cell";
									contentDiv.style.paddingLeft = "5px";
									contentDiv.style.paddingRight = "5px";
									var videoTitle = document.createElement("h3");
									videoTitle.style.verticalAlign = "middle";
									videoTitle.style.margin = "0px auto";
									videoTitle.innerHTML = itemData.title;
									contentDiv.appendChild(videoTitle);
									var videoDescription = document.createElement("p");
									videoDescription.style.verticalAlign = "bottom";
									videoDescription.style.margin = "0px";
									videoDescription.style.fontSize = "small";
									videoDescription.innerHTML = itemData.author;
									if (itemData["author_verified"] && itemData["author_verified"] === true) {
										videoDescription.innerHTML += '<b class="user-verified" title="This user is verified.">&check;</b>';
									}
									videoDescription.innerHTML += " &centerdot; " + itemData.duration;
									videoDescription.innerHTML += " &centerdot; #" + (i + 1);
									contentDiv.appendChild(videoDescription);
									videoDiv.appendChild(contentDiv);
									ti.appendChild(videoDiv);
								}
							} else {
								var __error = nTube.nTubeUtils.getErrorReason(o);
								if (__error !== null) {
									const nudgingDiv = libWeb.DOM.create_dom("div").style({ borderColor: "orangered", paddingRight: "5px" }).make();
									nudgingDiv.classList.add("poly-item");
									libWeb.DOM.create_dom("h3").style({ marginTop: "5px", marginBottom: "5px" }).text("Request failed.").appendTo(nudgingDiv);
									libWeb.DOM.create_dom("p")
										.style({ marginTop: "5px", marginBottom: "5px" })
										.text("Failed to load trending, got the following error: " + __error)
										.appendTo(nudgingDiv);
									id("-root").appendChild(nudgingDiv);
								} else {
									console.error(o);
									alert("Failed to load trending.\nCheck your browser console for more information.\n\nSorry about this :/");
								}
							}
						}
					);
				};
			</script>
		</div>
		<style id="ntube-custom-css"></style>
		<script>
			function hasSettings() {
				try {
					const y = Settings.load("ntube_settings");
					return y !== null && isJson(y);
				} catch (e) {
					console.error(e);
					return false;
				}
			}
			run_async(function () {
				try {
					nTube.init();
					nTube.initTheming();
				} catch (e) {}
			});
			run_async(function () {
				console.debug("Loading settings...");
				window.__SETTINGS_OBJECT = nTubeSettings.auto();
				window.Config = window.__SETTINGS_OBJECT; // COMPAT HACK
				if (window.__SETTINGS_OBJECT.appearance.enable_new_look) {
					id("poly-item-css").innerHTML =
						".poly-item {padding-left: 5px; box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08), 0 10px 10px rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 10px;}";
					try {
						id("collapsible-css").innerHTML = ".active, .collapsible:hover {background-color: rgba(80, 80, 80, 0.3);}";
					} catch (e) {
						console.error(e);
					}
				}
				if (window.__SETTINGS_OBJECT.appearance.custom_css) {
					try {
						id("ntube-custom-css").innerHTML = base64Decode(window.__SETTINGS_OBJECT.appearance.custom_css);
					} catch (e) {
						console.error(e);
					}
				}
				if (window.__SETTINGS_OBJECT.appearance.use_newer_ui_preset) {
					try {
						id("body-css").innerHTML = "body {background-color: #111111; color: white;}";
					} catch (e) {
						console.error(e);
					}
				}
			});
		</script>
	</body>
</html>
